<template>
  <div>
    <el-card>
      <!--操作区域 -->
      <el-row type="flex"
              justify="space-between">
        <div>
          <!--表单筛选 -->
          <el-form label-width="80px"
                   :inline="true"
                   size="normal">
            <el-form-item>
              <el-input v-model.trim="queryData.subject_name"
                        placeholder="学科名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select placeholder="请选择"
                         v-model="queryData.is_show">
                <el-option v-for="item in enableState"
                           :key="item.id"
                           :label="item.value"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         size="small"
                         @click="searchOK">搜索</el-button>
              <el-button size="small"
                         @click="searchCancel">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button size="small"
                     @click="$refs.Addsubiect.dialogShow = true">创建学科</el-button>
        </div>
      </el-row>
      <br />
      <!--表格区域-->
      <el-table :data="list"
                border
                stripe>
        <el-table-column type="index"
                         label="序号"
                         align="center"></el-table-column>
        <el-table-column prop="id"
                         label="学科ID"
                         align="center"></el-table-column>
        <el-table-column prop="subject_name"
                         label="学科名称"
                         align="center"></el-table-column>
        <el-table-column prop="subject_icon"
                         label="学科图标"
                         align="center">
          <template slot-scope="{ row }">
            <span v-if="!row.subject_icon">暂无</span>
            <el-image v-else
                      style="width: 100px; height: 100px"
                      :src="changeImg(row.subject_icon)"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="username"
                         label="创建人"
                         align="center"></el-table-column>
        <el-table-column prop="is_show"
                         label="是否显示"
                         align="center">
          <template slot-scope="{ row }">
            <el-switch @click.native="changeswitch(row.id, row.is_show)"
                       v-model="row.is_show"
                       active-text="是"
                       inactive-text="否"
                       :active-value="1"
                       :inactive-value="2"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="cate_num"
                         label="目录数量"
                         align="center">
          <template slot-scope="{ row }">
            <span v-if="!row.cate_num"> {{ row.cate_num }}</span>
            <span v-else
                  :class="{ color: row.cate_num }"
                  @click="toDirectory(row)">{{ row.cate_num }}
              <i v-if="row.cate_num"
                 class="el-icon-paperclip"></i></span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="{ row }">
            <el-button type="primary"
                       icon="el-icon-edit"
                       circle
                       size="small"
                       @click="editRow(row.id)"></el-button>
            <el-button type="danger"
                       icon="el-icon-delete"
                       circle
                       size="small"
                       @click="delRow(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页区域 -->
      <el-pagination @size-change="sizeChange"
                     @current-change="currentChange"
                     :current-page.sync="queryData.page"
                     :page-sizes="[5, 10, 15, 20]"
                     :page-size="queryData.limit"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="totalNum"
                     background>
      </el-pagination>
    </el-card>
    <!-- 新增弹框部分 -->
    <Addsubiect ref="Addsubiect"
                @addItem="initData"></Addsubiect>
  </div>
</template>

<script>

// 导入枚举数据
import EmployeesEnum from "@/api/constan/common";
import {
  getsubjectListApi,
  delsubjectApi,
  getsubjectApi,
  editsubjectApi,
} from "@/api/subject";
import Addsubiect from "@/views/subject/compoments/addsubiect";
export default {
  name: "subject",
  components: {
    Addsubiect,
  },
  data () {
    return {
      enableState: EmployeesEnum.enableState, //显示隐藏枚举
      list: [],
      queryData: {
        subject_name: "", //学科名称
        is_show: "", //1表示显示,2表示隐藏
        page: 1,
        limit: 10,
      },
      totalNum: 0, //数据总数
    };
  },
  created () {
    this.initData();
    this.changeImg();
    console.log(this.enableState);
  },
  methods: {
    // 初始化列表信息
    async initData () {
      const { list, total } = await getsubjectListApi(this.queryData);
      console.log(list);
      this.list = list;
      this.totalNum = total;
    },
    // 处理列表图片问题
    changeImg (url) {
      return process.env.VUE_APP_BASE_IMG + url;
    },
    //搜索
    async searchOK () {
      console.log(this.queryData);
      //v-model 双向绑定了  共用一个接口 重新调用函数即可
      this.queryData.page = 1;
      this.initData();
      await this.$nextTick();
      this.queryData.subject_name = "";
      this.queryData.is_show = "";
    },
    //重置
    searchCancel () {
      this.queryData.page = 1;
      this.queryData.subject_name = "";
      this.queryData.is_show = "";
      this.initData();
    },
    // 分页区域
    sizeChange (val) {
      this.queryData.limit = val;
      this.initData();
    },
    currentChange (val) {
      this.queryData.page = val;
      this.initData();
    },
    // 删除功能
    async delRow (id) {
      try {
        await this.$confirm("确定要删除吗");
      } catch (error) {
        return console.log(error);
      }
      await delsubjectApi(id);
      if (this.queryData.page !== 1 && this.list.length === 1) {
        this.queryData.page--;
      }
      this.$message.success("删除成功");
      this.initData();
    },
    //页面切换部分
    async changeswitch (id, val) {
      // 切换时拿到当前对应的数据
      const data = await getsubjectApi(id);
      data.is_show = val;
      await editsubjectApi(data);
      this.$message.success("更新成功");
      this.initData();
    },
    //修改部分
    async editRow (id) {
      const data = await getsubjectApi(id);
      this.$refs.Addsubiect.dialogShow = true;
      this.$refs.Addsubiect.formData = data;
      this.$refs.Addsubiect.fileList.push({
        name: "advimgsrc",
        url: process.env.VUE_APP_BASE_IMG + data.subject_icon,
      });
      this.$refs.Addsubiect.imgUrl =
        process.env.VUE_APP_BASE_IMG + data.subject_icon;
    },
    // 跳转
    toDirectory (data) {
      console.log(data);
      this.$router.push({
        path: "directory",
        query: { id: data.id },
      });
    },
  },
};
</script>

<style scoped>
.color {
  color: #66b1ff;
}
</style>
